@micka_design: New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean…

X AI KOLs Following Tools

Summary

Fluid Functionalism released an open-source chat-style message composer component with an auto-resizing textarea and flexible left/right action slots.

New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean, simple and efficient. Open source on https://fluidfunctionalism.com/docs/input-message…
Original Article
View Cached Full Text

Cached at: 06/06/26, 01:23 AM

New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean, simple and efficient. Open source on https://fluidfunctionalism.com/docs/input-message…


Fluid Functionalism

Source: https://www.fluidfunctionalism.com/docs/input-message PropTypeDefaultDescriptionvaluestring—Controlled textarea value.onValueChange(value: string) => void—Called with the new value on every textarea change.onSend(value: string, files: File[]) => void—Fires on Enter (without Shift) or send-button click. Receives the trimmed value and the currently-attached files. Skipped when the value is empty and no files are attached.placeholderstring“Ask me anything…“Placeholder shown when the value is empty. While a file is being dragged over the component (and attachments are enabled), the placeholder swaps to “Drop files here to add to chat”.leftSlotReactNode | (ctx) => ReactNode—Content rendered in the bottom-left action area. May be a render-fn that receives `{ openFilePicker, files }` — `openFilePicker(acceptOverride?)` opens the native file picker (optionally scoped to a subset of accept types, e.g. `“image/*”`).rightSlotReactNode | (ctx) => ReactNode—Content rendered in the bottom-right action area, before the built-in send button. Same render-fn shape as `leftSlot`.disabledbooleanfalseDisables the textarea, send button, and drag-and-drop.minRowsnumber1Minimum visible rows before the textarea grows.maxRowsnumber8Maximum visible rows before the textarea starts to scroll.clickToFocusbooleantrueWhen true, clicking anywhere on the surrounding container (outside of buttons / links / inputs) focuses the textarea.sendLabelstring“Send“Accessible label for the send button.filesFile[]—Controlled list of attached files. Pair with `onFilesChange` to enable drag-and-drop and the file-picker slot helper. When omitted, attachment behavior is disabled.onFilesChange(files: File[]) => void—Called when files are added (drag-drop or picker) or removed via the preview tile’s × button. Duplicate drops of the same file (same name + size + lastModified) are silently de-duplicated.acceptstring“image/png,image/jpeg,application/pdf“Accepted MIME types as a comma-separated string. Used by both the file picker and the drag-and-drop filter.maxFilesnumber—Maximum number of attached files. Extra files beyond this limit are dropped.filePreviewSizenumber80Side length (in pixels) of each preview tile. Images use object-cover; PDFs render the first page via pdfjs; other types fall back to a centered icon.textareaPropsTextareaHTMLAttributes—Extra props forwarded to the underlying textarea (value, onChange, onKeyDown, disabled and placeholder are controlled by the component).

Similar Articles