input-bar

1"use client";
2 
3import { memo, useState, useCallback, useRef, useEffect } from "react";
4import type { ChatStatus } from "ai";
5import { cn } from "./utils/cn";
6 
7type InputConfig = {
8  inputBarPlaceholder: string;
9  attachmentButtonPosition: "left" | "right";
10  attachmentPreviewStyle: "thumbnail" | "chip" | "hidden";
11};
12 
13const DEFAULT_INPUT_CONFIG: InputConfig = {
14  inputBarPlaceholder: "Send a message...",
15  attachmentButtonPosition: "left",
16  attachmentPreviewStyle: "thumbnail",
17};
18 
19import {
20  IconChevronDown,
21  IconChevronUp,
22  IconMessageCircleQuestion,
23  IconX,
24} from "@tabler/icons-react";
25import { SendButton } from "./input/send-button";
26import { AttachmentButton } from "./input/attachment-button";
27import { FileAttachment } from "./input/file-attachment";
28import { useInputTyping } from "./input/input-typing";
29import { QuestionPrompt } from "./question/question-prompt";
30import { Suggestions, type SuggestionItem } from "./input/suggestions";
31import type {
32  QuestionAnswer,
33  QuestionConfig,
34} from "./question/question-prompt";
35 
36export type AttachedImage = {
37  id: string;
38  filename: string;
39  url: string;
40  size?: number;
41};
42 
43export type AttachedFile = {
44  id: string;
45  filename: string;
46  size?: number;
47};
48 
49export type InputBarProps = {
50  onSend: (message: { role: "user"; content: string }) => void;
51  status: ChatStatus;
52  onStop: () => void;
53  placeholder?: string;
54  className?: string;
55 
56  // Attachment support
57  onAttach?: () => void;
58  attachedImages?: AttachedImage[];
59  attachedFiles?: AttachedFile[];
60  onRemoveImage?: (id: string) => void;
61  onRemoveFile?: (id: string) => void;
62  onPaste?: (e: React.ClipboardEvent) => void;
63  isDragOver?: boolean;
64  /**
65   * When true (default) clicking a staged image attachment opens a
66   * fullscreen lightbox preview. Set to false to render thumbnails as
67   * plain non-interactive previews.
68   */
69  enableImagePreview?: boolean;
70 
71  // Controlled mode
72  value?: string;
73  onChange?: (value: string) => void;
74  disabled?: boolean;
75  autoFocus?: boolean;
76  suggestions?:
77    | SuggestionItem[]
78    | {
79        items: SuggestionItem[];
80        className?: string;
81        itemClassName?: string;
82      };
83 
84  // Typing animation
85  typingAnimation?: {
86    text: string;
87    duration: number;
88    image?: string;
89    isActive: boolean;
90    onComplete: () => void;
91  };
92 
93  infoBar?: {
94    title?: string;
95    description?: string;
96    onClose?: () => void;
97    position?: "top" | "bottom";
98// … truncated