Prompt Command

Um componente de interface para comandos de IA com suporte a sugestões, animações e interação por teclado.

Utilização

index.tsx
import { PromptCommand } from "@convertcompany/ui/ai";

Exemplos

Configuração Básica

O PromptCommand é um componente de interface que fornece uma experiência de interação com IA através de um modal elegante.

Com Sugestões

Configure sugestões pré-definidas para facilitar a interação do usuário e acelerar o processo de criação de prompts.

Com Valor Inicial

Defina um valor inicial para o campo de entrada, útil para edição ou preenchimento automático.

Sugestões com Ícones

Adicione ícones às sugestões para melhorar a experiência visual e facilitar a identificação das opções.

Props

PromptCommand Props

PropriedadeTipo
openControla se o modal está aberto ou fechado.
boolean
onCloseFunção chamada quando o modal é fechado.
() => void
onSubmitFunção chamada quando o usuário submete o prompt.
(value: string) => void
placeholderTexto de placeholder para o campo de entrada.
string
buttonTextTexto do botão de submissão.
string
initialValueValor inicial para o campo de entrada.
string
suggestionsLista de sugestões pré-definidas para facilitar a interação.
PromptSuggestionProps[]
classNameClasse CSS adicional para customização.
string

PromptSuggestionProps

PropriedadeTipo
textTexto exibido na sugestão.
string
valueValor que será inserido no campo quando a sugestão for clicada.
string
iconÍcone opcional para a sugestão.
ReactNode

Integração com AiProvider

O PromptCommand é projetado para trabalhar em conjunto com o AiProvider. Para usar em sua aplicação:

  1. Configure o Provider: Envolva sua aplicação com o AiProvider
  2. Use o Hook: Utilize o hook useAi para acessar as funcionalidades
  3. Interação Automática: O PromptCommand será renderizado automaticamente
import { useAi } from "@convertcompany/ui/ai";

function MyComponent() {
  const { askWithAi } = useAi();

  const handleOpenPrompt = async () => {
    const result = await askWithAi({
      placeholder: "Digite sua pergunta...",
      suggestions: [
        { text: "Sugestão 1", value: "Valor 1" },
        { text: "Sugestão 2", value: "Valor 2" }
      ]
    });

    if (!result.cancelled) {
      console.log("Resposta:", result.value);
    }
  };

  return <Button onClick={handleOpenPrompt}>Abrir IA</Button>;
}

Melhores Práticas

  1. Sugestões Contextuais: Use sugestões relevantes para o contexto da aplicação
  2. Placeholders Descritivos: Forneça placeholders que orientem o usuário
  3. Valores Iniciais Úteis: Use valores iniciais para acelerar o fluxo de trabalho
  4. Feedback Visual: Forneça feedback visual quando operações estiverem em andamento
  5. Tratamento de Erros: Sempre trate casos de cancelamento e erro
  6. Acessibilidade: Certifique-se de que as funcionalidades são acessíveis via teclado