@micka_design: New component drop: Chat-style message composer with an auto-resizing textarea, flexible left/right action slots. Clean…
Summary
Fluid Functionalism released an open-source chat-style message composer component with an auto-resizing textarea and flexible left/right action slots.
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
@micka_design: Passed a few quality of life improvements on two most-requested tweaks for the AskUserQuestions component: - Freeform “…
Quality-of-life improvements for the AskUserQuestions component: freeform 'other' textarea and left-aligned chip layout, driven by community feedback.
@Replit: The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet t…
Replit introduces Canvas, an agentic design tool for building websites, apps, and marketing assets, emphasizing spatial exploration over chat-based design.
@nolansym: Free & Open Source Shadcn Components
cult-ui releases 92+ open-source AI agent UI patterns and full-stack Next.js templates for building copy-paste component libraries with shadcn.
@dav_pukha: Framer + composer 2.5 is soo insane... built this interactive hero in like an hour
A developer praises Framer and composer 2.5 for enabling rapid creation of an interactive hero component within an hour.
@geekbb: Found a smooth Markdown editor designed for AI chat context management. Built with Tauri + React + TypeScript, cross-platform support for macOS / Windows / Linux. Left side CodeMirror 6…
marka.md is a cross-platform Markdown editor specialized for AI context management, built with Tauri, React, and TypeScript. It features live preview, Vim mode, themes, and a context tray to bundle notes for AI chats like Claude, ChatGPT, and Gemini.