AI Components / Translation Panel
Translation Panel
Split-pane translation interface with language selectors, confidence badge, alternatives, and copy buttons.
ai-workflowv0.6.0
Playground
Examples
Translation
<ai-translation-panel sourceText="Hello, how are you today? I hope everything is going well." targetText="Hola, como estas hoy? Espero que todo vaya bien." sourceLang="en" targetLang="es" confidence="0.92" style="max-width:550px;"></ai-translation-panel>Loading
<ai-translation-panel sourceText="Translate this text please." sourceLang="en" targetLang="fr" loading style="max-width:550px;"></ai-translation-panel>Import
import { AiTranslationPanel } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-translation-panel';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
sourceText | string | — | Source text to translate |
targetText | string | — | Translated text |
sourceLang | string | "en" | Source language code |
targetLang | string | "es" | Target language code |
loading | boolean | false | Show loading state |
confidence | number | 0 | Translation confidence 0-1 |
alternatives | {text, confidence}[] | — | Alternative translations |
Events
| Event | Detail | Description |
|---|---|---|
ai-translation-request | {sourceText, sourceLang, targetLang} | Translation requested |
ai-translation-select-alt | {text, confidence} | Alternative selected |
ai-translation-copy | {text, side} | Text copied |