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.

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.

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.

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.

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.

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.

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.

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.

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.

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.