# `PhiaUi.Components.Editor.AiAssistant`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/ai_assistant.ex#L1)

AI Assistant Suite — 10 components for integrating AI capabilities into the
PhiaUI rich text editor.

These components provide the visual UI layer for AI-powered editing features.
The actual AI logic is delegated to the `PhiaUi.Editor.AiBridge` behaviour,
which users implement with their preferred LLM provider.

## Components

### Chat & Suggestions
- `ai_sidebar/1`            — chat-like panel with message history + input
- `ai_inline_suggestion/1`  — ghost text overlay for inline completions
- `ai_autocomplete/1`       — dropdown suggestion list with keyboard nav

### Content Transformation
- `ai_summary_card/1`       — card displaying AI-generated summary
- `ai_rewrite_dialog/1`     — style-based rewriting with before/after preview
- `ai_translate_dialog/1`   — language translation with source/target pickers
- `ai_command_bar/1`        — sparkle-icon command input for freeform prompts

### Analysis & Scoring
- `ai_tone_adjuster/1`      — range slider for formal ↔ casual tone
- `ai_grammar_check/1`      — list of grammar suggestions with accept/dismiss
- `ai_content_score/1`      — clarity/engagement/readability progress bars

# `ai_autocomplete`

Renders a dropdown list of AI autocomplete suggestions.

Each suggestion is a string. The item at `:selected_index` is visually
highlighted. Use arrow keys + Enter to navigate/accept.

## Example

    <.ai_autocomplete
      id="ai-complete"
      suggestions={@completions}
      visible={@show_completions}
      selected_index={@completion_index}
    />

## Attributes

* `id` (`:string`) (required)
* `suggestions` (`:list`) - Defaults to `[]`.
* `visible` (`:boolean`) - Defaults to `false`.
* `selected_index` (`:integer`) - Defaults to `0`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_command_bar`

Renders a command bar input with a sparkle icon for freeform AI prompts.

Hidden when `:visible` is false. The input fires `phx-submit="ai:command"`
with the query text.

## Example

    <.ai_command_bar id="ai-cmd" editor_id="my-editor" visible={@show_ai_bar} />

## Attributes

* `id` (`:string`) (required)
* `editor_id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `query` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_content_score`

Renders three labeled progress bars for content quality scores.

Expects `:scores` to be a map with optional keys `:clarity`, `:engagement`,
and `:readability`, each 0-100.

## Example

    <.ai_content_score
      id="score"
      scores={%{clarity: 85, engagement: 72, readability: 91}}
    />

## Attributes

* `id` (`:string`) (required)
* `scores` (`:map`) - Defaults to `%{}`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_grammar_check`

Renders a list of grammar/style suggestions with accept/dismiss actions.

Each item in `:suggestions` should be a map with `:text` (original),
`:suggestion` (replacement), and `:type` (`:grammar`, `:spelling`, `:style`).

## Example

    <.ai_grammar_check
      id="grammar"
      suggestions={[
        %{text: "their", suggestion: "there", type: :grammar},
        %{text: "alot", suggestion: "a lot", type: :spelling}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `suggestions` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_inline_suggestion`

Renders an inline ghost-text suggestion overlay.

The suggestion appears as dimmed text that the user can accept (Tab) or
dismiss (Escape). Visibility is controlled by the `:visible` attr.

## Example

    <.ai_inline_suggestion id="ghost" suggestion="the quick brown fox" visible={@show_suggestion} />

## Attributes

* `id` (`:string`) (required)
* `suggestion` (`:string`) - Defaults to `""`.
* `visible` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_rewrite_dialog`

Renders a dialog for AI-powered text rewriting with style selection.

Displays a row of style buttons, the original text, and the rewritten result.
The user selects a style which triggers a `phx-click="ai:rewrite"` event.

## Example

    <.ai_rewrite_dialog
      id="rewrite"
      visible={@show_rewrite}
      original_text={@selected_text}
      rewritten_text={@rewritten}
      selected_style={@rewrite_style}
      loading={@rewriting}
    />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `styles` (`:list`) - Defaults to `[:professional, :casual, :concise, :detailed, :creative]`.
* `selected_style` (`:atom`) - Defaults to `nil`.
* `original_text` (`:string`) - Defaults to `""`.
* `rewritten_text` (`:string`) - Defaults to `""`.
* `loading` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_sidebar`

Renders a chat-like AI assistant panel with message history and input.

Each message in the `:messages` list should be a map with `:role` (`:user` or
`:assistant`) and `:content` (string) keys.

## Example

    <.ai_sidebar id="ai-chat" messages={@ai_messages} loading={@ai_loading} />

## Attributes

* `id` (`:string`) (required)
* `messages` (`:list`) - Defaults to `[]`.
* `loading` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_summary_card`

Renders a card displaying an AI-generated summary.

Shows a loading skeleton when `:loading` is true, otherwise displays the
summary text.

## Example

    <.ai_summary_card id="summary" summary={@ai_summary} loading={@summarizing} />

## Attributes

* `id` (`:string`) (required)
* `summary` (`:string`) - Defaults to `""`.
* `loading` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_tone_adjuster`

Renders a range slider for adjusting tone from Formal (0) to Casual (100).

Fires `phx-change="ai:tone"` with the slider value.

## Example

    <.ai_tone_adjuster id="tone" value={@tone_value} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:integer`) - Defaults to `50`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `ai_translate_dialog`

Renders a translation dialog with source/target language dropdowns and text areas.

## Example

    <.ai_translate_dialog
      id="translate"
      visible={@show_translate}
      original_text={@selected_text}
      translated_text={@translated}
      source_lang={@source_lang}
      target_lang={@target_lang}
      loading={@translating}
    />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `languages` (`:list`) - Defaults to `["English", "Spanish", "French", "German", "Portuguese", "Chinese", "Japanese"]`.
* `source_lang` (`:string`) - Defaults to `nil`.
* `target_lang` (`:string`) - Defaults to `nil`.
* `original_text` (`:string`) - Defaults to `""`.
* `translated_text` (`:string`) - Defaults to `""`.
* `loading` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*