Multimodal Search Bar

Uma barra de pesquisa moderna e flexível para React que suporta texto multilinhas e colagem de imagens.

Características

• ✨ Design moderno e responsivo
• 🖼️ Suporte para colar imagens via Ctrl+V
• 📝 Entrada de texto multilinha (usando Shift+Enter)
• 📱 Interface adaptativa que muda conforme o conteúdo
• 🎨 Totalmente personalizável
• 🔄 Integração com TailwindCSS

Instalação

npm install multimodal-search-bar
# ou
yarn add multimodal-search-bar

Uso Básico

import React from 'react';
import { SearchBar } from 'multimodal-search-bar';
import 'multimodal-search-bar/dist/multimodal-search-bar.css';

function App() {
  const handleSearchSubmit = (text, image) => {
    console.log('Texto:', text);
    if (image) {
      console.log('Imagem recebida:', image.substring(0, 50) + '...');
    }
  };

  return (
    <div className="App">
      <SearchBar onSubmit={handleSearchSubmit} />
    </div>
  );
}

export default App;

Propriedades

| Propriedade | Tipo | Padrão | Descrição | | -------------- | --------------------------------------- | ---------------------------------------------------- | ----------------------------------------- | | onSubmit | (text: string, image?: string) => void | - | Callback chamado quando o usuário envia a pesquisa | | placeholder | string | "Pergunte alguma coisa ou cole uma imagem (Ctrl+V)" | Texto exibido quando o campo está vazio | | className | string | "" | Classes CSS adicionais | | maxHeight | number | 150 | Altura máxima do campo de texto em pixels |

Funcionalidades

Entrada Multilinha

Use Shift+Enter para adicionar uma nova linha no texto.

Colagem de Imagens

Para colar uma imagem, você pode:

• Pressionar Ctrl+V com uma imagem copiada do clipboard
• Clicar no ícone de imagem para abrir o seletor de arquivos

Personalização

O componente usa TailwindCSS internamente. Você pode customizar seu estilo passando classes adicionais através da propriedade className.

Licença

MIT © Ivan