Provider

Um contexto React que fornece funcionalidades de IA para interação com prompts e comandos em toda a aplicação.

Utilização

index.tsx
import { AiProvider, useAi } from "@convertcompany/ui";

Exemplos

Configuração Básica

Configure o AiProvider no nível mais alto da sua aplicação para disponibilizar as funcionalidades de IA.

O provider está disponível em toda a aplicação

Usando o Hook useAi

Utilize o hook useAi para acessar as funcionalidades do provider em qualquer componente filho.

Clique para abrir o prompt de IA

Com Sugestões

Configure sugestões pré-definidas para facilitar a interação do usuário.

Prompt com sugestões pré-definidas

Modo Personalizado

Configure o modo padrão do provider para diferentes tipos de interação.

Provider configurado com modo personalizado

Cancelamento de Operação

O provider permite cancelar operações em andamento e limpar o estado.

Use a função cancel() para interromper operações

Props

AiProvider Props

PropriedadeTipo
childrenComponentes filhos que terão acesso ao contexto de IA.
ReactNode
defaultModeModo padrão para interação com IA. Atualmente suporta 'command'.
AiMode

AskOptions Props

PropriedadeTipo
modeModo de interação com IA. Sobrescreve o modo padrão do provider.
AiMode
placeholderTexto de placeholder para o campo de entrada.
string
buttonTextTexto do botão de submissão.
string
suggestionsLista de sugestões pré-definidas para facilitar a interação.
PromptSuggestionProps[]
initialValueValor inicial para o campo de entrada.
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

Tipos

type AiMode = "command";

type AskResult = {
  value: string;
  cancelled: boolean;
};

type AskOptions = {
  mode?: AiMode;
  placeholder?: string;
  buttonText?: string;
  suggestions?: PromptSuggestionProps[];
  initialValue?: string;
};

type PromptSuggestionProps = {
  text: string;
  value?: string;
  icon?: React.ReactNode;
};

Hooks

useAi

O hook useAi fornece acesso às funcionalidades do AiProvider.

const { askWithAi, cancel, isOpen } = useAi();

Retorna

  • askWithAi: Função para abrir o prompt de IA
  • cancel: Função para cancelar operações em andamento
  • isOpen: Estado indicando se o prompt está aberto

Exemplo de Uso

import { useAi } from "@convertcompany/ui";

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

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

    if (!result.cancelled) {
      // Processar o resultado
      console.log(result.value);
    }
  };

  return (
    <Button className="bg-gradient-to-br from-vertt-500 to-indigo-600">
      Abrir IA
    </Button>
  )
}

Integração com Outros Componentes

O AiProvider trabalha em conjunto com outros componentes de IA:

  • PromptCommand: Componente de interface para comandos de IA
  • Icons: Ícones específicos para funcionalidades de IA

Melhores Práticas

  1. Configuração no Nível Alto: Sempre configure o AiProvider no nível mais alto da aplicação
  2. Tratamento de Erros: Sempre verifique se a operação foi cancelada antes de processar o resultado
  3. Sugestões Contextuais: Use sugestões relevantes para o contexto da aplicação
  4. Feedback Visual: Forneça feedback visual quando operações de IA estiverem em andamento
  5. Acessibilidade: Certifique-se de que as funcionalidades de IA são acessíveis via teclado