This commit is contained in:
@@ -111,6 +111,12 @@ defmodule ElixirAiWeb.HomeLive do
|
||||
{:error, :already_exists} ->
|
||||
{:noreply, assign(socket, error: "A conversation with that name already exists")}
|
||||
|
||||
{:error, :failed_to_load} ->
|
||||
{:noreply,
|
||||
assign(socket,
|
||||
error: "Conversation was saved but failed to load"
|
||||
)}
|
||||
|
||||
_ ->
|
||||
{:noreply, assign(socket, error: "Failed to create conversation")}
|
||||
end
|
||||
|
||||
@@ -12,21 +12,28 @@ defmodule ElixirAiWeb.VoiceLive do
|
||||
<div class="fixed top-4 right-4 w-72 bg-cyan-950/95 border border-cyan-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur">
|
||||
<div class="flex items-center gap-3">
|
||||
<%= if @state == :idle do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-500 shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z"/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 text-cyan-500 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
|
||||
</svg>
|
||||
<span class="text-cyan-400 font-semibold text-sm">Voice Input</span>
|
||||
<% end %>
|
||||
<%= if @state == :recording do %>
|
||||
<span class="relative flex h-3 w-3 shrink-0">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75">
|
||||
</span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
</span>
|
||||
<span class="text-cyan-50 font-semibold text-sm">Recording</span>
|
||||
<% end %>
|
||||
<%= if @state == :processing do %>
|
||||
<span class="relative flex h-3 w-3 shrink-0">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75">
|
||||
</span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-cyan-400"></span>
|
||||
</span>
|
||||
<span class="text-cyan-50 font-semibold text-sm">Processing…</span>
|
||||
@@ -42,9 +49,7 @@ defmodule ElixirAiWeb.VoiceLive do
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @state == :transcribed do %>
|
||||
<div class="rounded-xl bg-cyan-900/60 border border-cyan-700 px-3 py-2">
|
||||
<p class="text-sm text-cyan-50 leading-relaxed">{@transcription}</p>
|
||||
</div>
|
||||
<.transcription_display transcription={@transcription} />
|
||||
<% end %>
|
||||
<%= if @state == :idle do %>
|
||||
<button
|
||||
@@ -52,7 +57,9 @@ defmodule ElixirAiWeb.VoiceLive do
|
||||
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-700 hover:bg-cyan-600 text-cyan-50 text-xs font-medium transition-colors"
|
||||
>
|
||||
<span>Start Recording</span>
|
||||
<kbd class="text-cyan-300 bg-cyan-800 border border-cyan-600 px-1.5 py-0.5 rounded font-mono">Ctrl+Space</kbd>
|
||||
<kbd class="text-cyan-300 bg-cyan-800 border border-cyan-600 px-1.5 py-0.5 rounded font-mono">
|
||||
Ctrl+Space
|
||||
</kbd>
|
||||
</button>
|
||||
<% end %>
|
||||
<%= if @state == :recording do %>
|
||||
@@ -61,7 +68,9 @@ defmodule ElixirAiWeb.VoiceLive do
|
||||
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-800 hover:bg-cyan-700 text-cyan-50 text-xs font-medium transition-colors border border-cyan-700"
|
||||
>
|
||||
<span>Stop Recording</span>
|
||||
<kbd class="text-cyan-300 bg-cyan-900 border border-cyan-700 px-1.5 py-0.5 rounded font-mono">Space</kbd>
|
||||
<kbd class="text-cyan-300 bg-cyan-900 border border-cyan-700 px-1.5 py-0.5 rounded font-mono">
|
||||
Space
|
||||
</kbd>
|
||||
</button>
|
||||
<% end %>
|
||||
<%= if @state == :transcribed do %>
|
||||
@@ -77,6 +86,14 @@ defmodule ElixirAiWeb.VoiceLive do
|
||||
"""
|
||||
end
|
||||
|
||||
defp transcription_display(assigns) do
|
||||
~H"""
|
||||
<div class="rounded-xl bg-cyan-900/60 border border-cyan-700 px-3 py-2">
|
||||
<p class="text-sm text-cyan-50 leading-relaxed">{@transcription}</p>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def handle_event("recording_started", _params, socket) do
|
||||
{:noreply, assign(socket, state: :recording)}
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user