working on voice control

lib/elixir_ai_web/chat/chat_live.ex

@@ -260,8 +260,17 @@ defmodule ElixirAiWeb.ChatLive do
   def handle_info({:ai_request_error, reason}, socket) do
     error_message =
       case reason do
-        %{__struct__: mod, reason: r} -> "#{inspect(mod)}: #{inspect(r)}"
-        _ -> inspect(reason)
+        "proxy error" <> _ ->
+          "Could not connect to AI provider. Please check your proxy and provider settings."
+
+        %{__struct__: mod, reason: r} ->
+          "#{inspect(mod)}: #{inspect(r)}"
+
+        msg when is_binary(msg) ->
+          msg
+
+        _ ->
+          inspect(reason)
       end
 
     {:noreply, assign(socket, ai_error: error_message, streaming_response: nil)}

lib/elixir_ai_web/chat/chat_message.ex

@@ -1,8 +1,9 @@
 defmodule ElixirAiWeb.ChatMessage do
   use Phoenix.Component
   alias Phoenix.LiveView.JS
+  import ElixirAiWeb.JsonDisplay
 
-  defp max_width_class, do: "max-w-300"
+  defp max_width_class, do: "max-w-full xl:max-w-300"
 
   attr :content, :string, required: true
   attr :tool_call_id, :string, required: true
@@ -38,7 +39,7 @@ defmodule ElixirAiWeb.ChatMessage do
   def user_message(assigns) do
     ~H"""
     <div class="mb-2 text-sm text-right">
-      <div class={"inline-block px-3 py-2 rounded-lg  bg-seafoam-950 text-seafoam-50 #{max_width_class()} text-left"}>
+      <div class={"w-fit px-3 py-2 rounded-lg  bg-seafoam-950 text-seafoam-50 #{max_width_class()} text-left"}>
         {@content}
       </div>
     </div>
@@ -78,7 +79,7 @@ defmodule ElixirAiWeb.ChatMessage do
   # chunks instead of re-rendering the full markdown on every token.
   def streaming_assistant_message(assigns) do
     ~H"""
-    <div class="mb-2 text-sm text-left">
+    <div class="mb-2 text-sm text-left min-w-0">
       <!-- Reasoning section — only shown once reasoning_content is non-empty.
            The div is always in the DOM so the hook mounts before chunks arrive. -->
       <div id="stream-reasoning-wrap">
@@ -127,7 +128,7 @@ defmodule ElixirAiWeb.ChatMessage do
         phx-hook="MarkdownStream"
         phx-update="ignore"
         data-event="md_chunk"
-        class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
+        class={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
       >
       </div>
     </div>
@@ -142,7 +143,7 @@ defmodule ElixirAiWeb.ChatMessage do
 
   defp message_bubble(assigns) do
     ~H"""
-    <div class="mb-2 text-sm text-left">
+    <div class="mb-2 text-sm text-left min-w-0">
       <%= if @reasoning_content && @reasoning_content != "" do %>
         <button
           type="button"
@@ -191,7 +192,7 @@ defmodule ElixirAiWeb.ChatMessage do
           phx-hook="MarkdownRender"
           phx-update="ignore"
           data-md={@content}
-          class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
+          class={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
         >
         </div>
       <% end %>
@@ -253,47 +254,49 @@ defmodule ElixirAiWeb.ChatMessage do
       )
 
     ~H"""
-    <div class={[
-      "mb-1 #{max_width_class()} rounded-lg border text-xs font-mono overflow-hidden bg-seafoam-950/40",
-      @state == :error && "border-red-900/50",
-      @state == :called && "border-seafoam-900/60",
-      @state in [:pending, :success] && "border-seafoam-900"
-    ]}>
-      <div class={[
-        "flex items-center gap-2 px-3 py-1.5 border-b text-seafoam-400",
-        @state == :error && "border-red-900/50 bg-red-900/20",
-        @state == :called && "border-seafoam-900/60 bg-seafoam-900/20",
-        @state in [:pending, :success] && "border-seafoam-900 bg-seafoam-900/30"
-      ]}>
-        <.tool_call_icon />
-        <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
-        <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
-          {@_truncated}
-        </span>
-        <span :if={!@_truncated} class="flex-1" />
-        <button
-          :if={@_truncated}
-          type="button"
-          phx-click={
+    <div
+      id={@_id}
+      class={[
+        "mb-1 #{max_width_class()} rounded-lg border text-xs font-mono overflow-hidden bg-seafoam-950/40",
+        @state == :error && "border-red-900/50",
+        @state == :called && "border-seafoam-900/60",
+        @state in [:pending, :success] && "border-seafoam-900"
+      ]}
+    >
+      <div
+        class={[
+          "flex items-center gap-2 px-3 py-1.5 border-b text-seafoam-400",
+          @_truncated && "cursor-pointer select-none",
+          @state == :error && "border-red-900/50 bg-red-900/20",
+          @state == :called && "border-seafoam-900/60 bg-seafoam-900/20",
+          @state in [:pending, :success] && "border-seafoam-900 bg-seafoam-900/30"
+        ]}
+        phx-click={
+          @_truncated &&
             JS.toggle_class("hidden", to: "##{@_id}-args")
             |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
-          }
-          class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
+        }
+      >
+        <.tool_call_icon />
+        <span class="text-seafoam-400 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-500 truncate flex-1 min-w-0 ml-1">
+          <.json_display json={@_truncated} inline />
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <svg
+          :if={@_truncated}
+          id={"#{@_id}-chevron"}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          class="w-3 h-3 shrink-0 mx-1 text-seafoam-700 transition-transform duration-200"
         >
-          <svg
-            id={"#{@_id}-chevron"}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            class="w-3 h-3 transition-transform duration-200"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
+          <path
+            fill-rule="evenodd"
+            d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+            clip-rule="evenodd"
+          />
+        </svg>
         <span :if={@state == :called} class="flex items-center gap-1 text-seafoam-500/50 shrink-0">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -376,26 +379,10 @@ defmodule ElixirAiWeb.ChatMessage do
   attr :arguments, :any, default: nil
 
   defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
-    assigns =
-      assign(
-        assigns,
-        :pretty_args,
-        case args do
-          s when is_binary(s) ->
-            case Jason.decode(s) do
-              {:ok, decoded} -> Jason.encode!(decoded, pretty: true)
-              _ -> s
-            end
-
-          other ->
-            Jason.encode!(other, pretty: true)
-        end
-      )
-
     ~H"""
     <div class="px-3 py-2 border-b border-seafoam-900/50">
       <div class="text-seafoam-500 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
-      <pre class="text-seafoam-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
+      <.json_display json={@arguments} />
     </div>
     """
   end

lib/elixir_ai_web/chat/json_display.ex

@@ -0,0 +1,132 @@
+defmodule ElixirAiWeb.JsonDisplay do
+  use Phoenix.Component
+
+  attr :json, :any, required: true
+  attr :class, :string, default: nil
+  attr :inline, :boolean, default: false
+
+  def json_display(%{json: json, inline: inline} = assigns) do
+    formatted =
+      case json do
+        nil ->
+          ""
+
+        "" ->
+          ""
+
+        s when is_binary(s) ->
+          case Jason.decode(s) do
+            {:ok, decoded} -> Jason.encode!(decoded, pretty: !inline)
+            _ -> s
+          end
+
+        other ->
+          Jason.encode!(other, pretty: !inline)
+      end
+
+    assigns = assign(assigns, :_highlighted, json_to_html(formatted))
+
+    ~H"""
+    <pre
+      :if={!@inline}
+      class={["whitespace-pre-wrap break-all text-xs font-mono leading-relaxed", @class]}
+    ><%= @_highlighted %></pre>
+    <span :if={@inline} class={["text-xs font-mono truncate", @class]}>{@_highlighted}</span>
+    """
+  end
+
+  @token_colors %{
+    key: "text-sky-300",
+    string: "text-emerald-400/80",
+    keyword: "text-violet-400",
+    number: "text-orange-300/80",
+    colon: "text-seafoam-500/50",
+    punctuation: "text-seafoam-500/50",
+    quote: "text-seafoam-500/50"
+  }
+
+  # Converts a plain JSON string into a Phoenix.HTML.safe value with
+  # <span> tokens coloured by token type.
+  defp json_to_html(""), do: Phoenix.HTML.raw("")
+
+  defp json_to_html(str) do
+    # Capture groups (in order):
+    # 1  string literal       "..."
+    # 2  keyword              true | false | null
+    # 3  number               -?digits with optional frac/exp
+    # 4  punctuation          { } [ ] , :
+    # 5  whitespace           spaces / newlines / tabs
+    # 6  fallback             any other single char
+    token_re =
+      ~r/(".(?:[^"\\]|\\.)*")|(true|false|null)|(-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)|([{}\[\],:])|(\s+)|(.)/s
+
+    tokens = Regex.scan(token_re, str, capture: :all_but_first)
+
+    {parts, _, _} =
+      Enum.reduce(tokens, {[], :val, []}, fn groups, {acc, state, ctx} ->
+        [string_tok, keyword_tok, number_tok, punct_tok, whitespace_tok, fallback_tok] =
+          pad_groups(groups, 6)
+
+        cond do
+          string_tok != "" ->
+            {color, next_state} =
+              if state == :key,
+                do: {@token_colors.key, :after_key},
+                else: {@token_colors.string, :after_val}
+
+            content = string_tok |> String.slice(1..-2//1) |> html_escape()
+            quote_span = color_span(@token_colors.quote, "&quot;")
+
+            {[quote_span <> color_span(color, content) <> quote_span | acc], next_state, ctx}
+
+          keyword_tok != "" ->
+            {[color_span(@token_colors.keyword, keyword_tok) | acc], :after_val, ctx}
+
+          number_tok != "" ->
+            {[color_span(@token_colors.number, number_tok) | acc], :after_val, ctx}
+
+          punct_tok != "" ->
+            {next_state, next_ctx} = advance_state(punct_tok, state, ctx)
+            color = if punct_tok == ":", do: @token_colors.colon, else: @token_colors.punctuation
+            {[color_span(color, punct_tok) | acc], next_state, next_ctx}
+
+          whitespace_tok != "" ->
+            {[whitespace_tok | acc], state, ctx}
+
+          fallback_tok != "" ->
+            {[html_escape(fallback_tok) | acc], state, ctx}
+
+          true ->
+            {acc, state, ctx}
+        end
+      end)
+
+    Phoenix.HTML.raw(parts |> Enum.reverse() |> Enum.join())
+  end
+
+  # State transitions driven by punctuation tokens.
+  # State :key   → we are about to read an object key.
+  # State :val   → we are about to read a value.
+  # State :after_key / :after_val → consumed the token; awaiting : or ,.
+  defp advance_state("{", _, ctx), do: {:key, [:obj | ctx]}
+  defp advance_state("[", _, ctx), do: {:val, [:arr | ctx]}
+  defp advance_state("}", _, [_ | ctx]), do: {:after_val, ctx}
+  defp advance_state("}", _, []), do: {:after_val, []}
+  defp advance_state("]", _, [_ | ctx]), do: {:after_val, ctx}
+  defp advance_state("]", _, []), do: {:after_val, []}
+  defp advance_state(":", _, ctx), do: {:val, ctx}
+  defp advance_state(",", _, [:obj | _] = ctx), do: {:key, ctx}
+  defp advance_state(",", _, ctx), do: {:val, ctx}
+  defp advance_state(_, state, ctx), do: {state, ctx}
+
+  defp pad_groups(list, n), do: list ++ List.duplicate("", max(0, n - length(list)))
+
+  defp color_span(class, content), do: ~s|<span class="#{class}">#{content}</span>|
+
+  defp html_escape(str) do
+    str
+    |> String.replace("&", "&amp;")
+    |> String.replace("<", "&lt;")
+    |> String.replace(">", "&gt;")
+  end
+end

lib/elixir_ai_web/voice/recording.ex

@@ -0,0 +1,90 @@
+defmodule ElixirAiWeb.Voice.Recording do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
+  attr :state, :atom, required: true
+
+  def recording(assigns) do
+    ~H"""
+    <div class="p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <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-seafoam-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-seafoam-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="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+            </span>
+            <span class="text-seafoam-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-seafoam-400 opacity-75">
+              </span>
+              <span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
+            </span>
+            <span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
+          <% end %>
+        </div>
+        <button
+          phx-click="minimize"
+          title="Minimize"
+          class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        </button>
+      </div>
+      <%= if @state in [:recording, :processing] do %>
+        <div id="voice-viz-wrapper" phx-update="ignore">
+          <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
+          </canvas>
+        </div>
+      <% end %>
+      <%= if @state == :idle do %>
+        <button
+          phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
+          class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
+        >
+          <span>Start Recording</span>
+          <kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
+            Ctrl+Space
+          </kbd>
+        </button>
+      <% end %>
+      <%= if @state == :recording do %>
+        <button
+          phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
+          class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
+        >
+          <span>Stop Recording</span>
+          <kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
+            Space
+          </kbd>
+        </button>
+      <% end %>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/voice/voice_conversation.ex

@@ -0,0 +1,97 @@
+defmodule ElixirAiWeb.Voice.VoiceConversation do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+  import ElixirAiWeb.ChatMessage
+  import ElixirAiWeb.Spinner
+
+  attr :messages, :list, required: true
+  attr :streaming_response, :any, default: nil
+  attr :ai_error, :string, default: nil
+
+  def voice_conversation(assigns) do
+    ~H"""
+    <div class="flex flex-col flex-1 overflow-hidden">
+      <div class="flex items-center justify-between px-4 pt-4 pb-2">
+        <span class="text-seafoam-300 font-semibold text-sm">Voice Chat</span>
+        <button
+          phx-click="minimize"
+          title="Minimize"
+          class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        </button>
+      </div>
+      <%= if @ai_error do %>
+        <div class="mx-4 mt-1 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
+          AI error: {@ai_error}
+        </div>
+      <% end %>
+      <div
+        id="voice-chat-messages"
+        phx-hook="ScrollBottom"
+        class="flex-1 overflow-y-auto px-4 py-2 space-y-1"
+      >
+        <%= for msg <- @messages do %>
+          <%= cond do %>
+            <% msg.role == :user -> %>
+              <.user_message content={Map.get(msg, :content) || ""} />
+            <% msg.role == :tool -> %>
+              <.tool_result_message
+                content={Map.get(msg, :content) || ""}
+                tool_call_id={Map.get(msg, :tool_call_id) || ""}
+              />
+            <% true -> %>
+              <.assistant_message
+                content={Map.get(msg, :content) || ""}
+                reasoning_content={Map.get(msg, :reasoning_content)}
+                tool_calls={Map.get(msg, :tool_calls) || []}
+              />
+          <% end %>
+        <% end %>
+        <%= if @streaming_response do %>
+          <.streaming_assistant_message
+            content={@streaming_response.content}
+            reasoning_content={@streaming_response.reasoning_content}
+            tool_calls={@streaming_response.tool_calls}
+          />
+          <.spinner />
+        <% end %>
+      </div>
+      <div class="px-4 pb-3 pt-2 flex items-center justify-between gap-2">
+        <button
+          phx-click="dismiss_transcription"
+          class="text-xs text-seafoam-500 hover:text-seafoam-300 transition-colors"
+        >
+          Dismiss
+        </button>
+        <button
+          phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
+          title="Voice input (Ctrl+Space)"
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-3.5 w-3.5"
+            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>Record</span>
+        </button>
+      </div>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/voice/voice_live.ex

@@ -2,15 +2,29 @@ defmodule ElixirAiWeb.VoiceLive do
   use ElixirAiWeb, :live_view
   require Logger
 
+  alias ElixirAiWeb.Voice.Recording
+  alias ElixirAiWeb.Voice.VoiceConversation
+  alias ElixirAi.{AiProvider, ChatRunner, ConversationManager}
+  import ElixirAi.PubsubTopics
+
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, state: :idle, transcription: nil, expanded: false), layout: false}
+    {:ok,
+     assign(socket,
+       state: :idle,
+       transcription: nil,
+       expanded: false,
+       conversation_name: nil,
+       messages: [],
+       streaming_response: nil,
+       runner_pid: nil,
+       ai_error: nil
+     ), layout: false}
   end
 
   def render(assigns) do
     ~H"""
     <div id="voice-control-hook" phx-hook="VoiceControl">
       <%= if not @expanded do %>
-        <%!-- Collapsed: semi-transparent mic button, still listens to Ctrl+Space via hook --%>
         <button
           phx-click="expand"
           title="Voice input (Ctrl+Space)"
@@ -26,99 +40,18 @@ defmodule ElixirAiWeb.VoiceLive do
           </svg>
         </button>
       <% else %>
-        <%!-- Expanded panel --%>
-        <div class="fixed top-4 right-4 w-72 bg-seafoam-950/95 border border-seafoam-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur">
-          <div class="flex items-center justify-between">
-            <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-seafoam-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-seafoam-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="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-                </span>
-                <span class="text-seafoam-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-seafoam-400 opacity-75">
-                  </span>
-                  <span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
-                </span>
-                <span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
-              <% end %>
-              <%= if @state == :transcribed do %>
-                <span class="text-seafoam-300 font-semibold text-sm">Transcription</span>
-              <% end %>
-            </div>
-            <%!-- Minimize button --%>
-            <button
-              phx-click="minimize"
-              title="Minimize"
-              class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14" />
-              </svg>
-            </button>
-          </div>
-          <%= if @state in [:recording, :processing] do %>
-            <div id="voice-viz-wrapper" phx-update="ignore">
-              <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
-              </canvas>
-            </div>
-          <% end %>
+        <div class={[
+          "fixed top-4 right-4 z-50 bg-seafoam-900 border border-seafoam-800 rounded-2xl shadow-2xl flex flex-col backdrop-blur",
+          if(@state == :transcribed, do: "w-96 max-h-[80vh]", else: "w-72")
+        ]}>
           <%= if @state == :transcribed do %>
-            <.transcription_display transcription={@transcription} />
-          <% end %>
-          <%= if @state == :idle do %>
-            <button
-              phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
-              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
-            >
-              <span>Start Recording</span>
-              <kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
-                Ctrl+Space
-              </kbd>
-            </button>
-          <% end %>
-          <%= if @state == :recording do %>
-            <button
-              phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
-              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
-            >
-              <span>Stop Recording</span>
-              <kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
-                Space
-              </kbd>
-            </button>
-          <% end %>
-          <%= if @state == :transcribed do %>
-            <button
-              phx-click="dismiss_transcription"
-              class="text-xs text-seafoam-500 hover:text-seafoam-300 transition-colors text-center w-full"
-            >
-              Dismiss
-            </button>
+            <VoiceConversation.voice_conversation
+              messages={@messages}
+              streaming_response={@streaming_response}
+              ai_error={@ai_error}
+            />
+          <% else %>
+            <Recording.recording state={@state} />
           <% end %>
         </div>
       <% end %>
@@ -126,14 +59,6 @@ defmodule ElixirAiWeb.VoiceLive do
     """
   end
 
-  defp transcription_display(assigns) do
-    ~H"""
-    <div class="rounded-xl bg-seafoam-900/60 border border-seafoam-700 px-3 py-2">
-      <p class="text-sm text-seafoam-50 leading-relaxed">{@transcription}</p>
-    </div>
-    """
-  end
-
   def handle_event("expand", _params, socket) do
     {:noreply, assign(socket, expanded: true)}
   end
@@ -168,15 +93,254 @@ defmodule ElixirAiWeb.VoiceLive do
   end
 
   def handle_event("dismiss_transcription", _params, socket) do
-    {:noreply, assign(socket, state: :idle, transcription: nil, expanded: false)}
+    name = socket.assigns.conversation_name
+
+    if name do
+      if socket.assigns.runner_pid do
+        try do
+          GenServer.call(socket.assigns.runner_pid, {:session, {:deregister_liveview_pid, self()}})
+        catch
+          :exit, _ -> :ok
+        end
+      end
+
+      Phoenix.PubSub.unsubscribe(ElixirAi.PubSub, chat_topic(name))
+    end
+
+    {:noreply,
+     assign(socket,
+       state: :idle,
+       transcription: nil,
+       expanded: false,
+       conversation_name: nil,
+       messages: [],
+       streaming_response: nil,
+       runner_pid: nil,
+       ai_error: nil
+     )}
   end
 
+  # Transcription received — open conversation and send as user message
   def handle_info({:transcription_result, {:ok, text}}, socket) do
-    {:noreply, assign(socket, state: :transcribed, transcription: text)}
+    socket = start_voice_conversation(socket, text)
+    {:noreply, socket}
   end
 
   def handle_info({:transcription_result, {:error, reason}}, socket) do
     Logger.error("VoiceLive: transcription failed: #{inspect(reason)}")
     {:noreply, assign(socket, state: :idle)}
   end
+
+  # --- Chat PubSub handlers (same pattern as ChatLive) ---
+
+  def handle_info({:user_chat_message, message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [message]))
+     |> push_event("scroll_to_bottom", %{})}
+  end
+
+  def handle_info(
+        {:start_ai_response_stream,
+         %{id: _id, reasoning_content: "", content: ""} = starting_response},
+        socket
+      ) do
+    {:noreply, assign(socket, streaming_response: starting_response)}
+  end
+
+  def handle_info(
+        {:reasoning_chunk_content, reasoning_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:reasoning_content, &(&1 <> reasoning_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:reasoning_chunk_content, reasoning_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | reasoning_content:
+          socket.assigns.streaming_response.reasoning_content <> reasoning_content
+    }
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("reasoning_chunk", %{chunk: reasoning_content})}
+  end
+
+  def handle_info(
+        {:text_chunk_content, text_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:content, &(&1 <> text_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:text_chunk_content, text_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | content: socket.assigns.streaming_response.content <> text_content
+    }
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("md_chunk", %{chunk: text_content})}
+  end
+
+  def handle_info(:tool_calls_finished, socket) do
+    {:noreply, assign(socket, streaming_response: nil)}
+  end
+
+  def handle_info({:tool_request_message, tool_request_message}, socket) do
+    {:noreply, update(socket, :messages, &(&1 ++ [tool_request_message]))}
+  end
+
+  def handle_info({:one_tool_finished, tool_response}, socket) do
+    {:noreply, update(socket, :messages, &(&1 ++ [tool_response]))}
+  end
+
+  def handle_info({:end_ai_response, final_message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [final_message]))
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:ai_request_error, reason}, socket) do
+    error_message =
+      case reason do
+        "proxy error" <> _ ->
+          "Could not connect to AI provider. Please check your proxy and provider settings."
+
+        %{__struct__: mod, reason: r} ->
+          "#{inspect(mod)}: #{inspect(r)}"
+
+        msg when is_binary(msg) ->
+          msg
+
+        _ ->
+          inspect(reason)
+      end
+
+    {:noreply, assign(socket, ai_error: error_message, streaming_response: nil)}
+  end
+
+  def handle_info({:db_error, reason}, socket) do
+    Logger.error("VoiceLive: db error: #{inspect(reason)}")
+    {:noreply, socket}
+  end
+
+  def handle_info({:liveview_tool_call, "navigate_to", %{"path" => path}}, socket) do
+    {:noreply, push_event(socket, "navigate_to", %{path: path})}
+  end
+
+  def handle_info({:liveview_tool_call, _tool_name, _args}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_info(:sync_streaming, %{assigns: %{runner_pid: pid}} = socket)
+      when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil ->
+        {:noreply, assign(socket, streaming_response: nil)}
+
+      %{content: content, reasoning_content: reasoning_content} = snapshot ->
+        socket =
+          socket
+          |> assign(streaming_response: snapshot)
+          |> then(fn s ->
+            if content != "", do: push_event(s, "md_chunk", %{chunk: content}), else: s
+          end)
+          |> then(fn s ->
+            if reasoning_content != "",
+              do: push_event(s, "reasoning_chunk", %{chunk: reasoning_content}),
+              else: s
+          end)
+
+        {:noreply, socket}
+    end
+  end
+
+  def handle_info(:sync_streaming, socket), do: {:noreply, socket}
+
+  def handle_info(:recovery_restart, socket) do
+    {:noreply, assign(socket, streaming_response: nil, ai_error: nil)}
+  end
+
+  # --- Private helpers ---
+
+  defp start_voice_conversation(socket, transcription) do
+    name = "voice-#{System.system_time(:second)}"
+
+    case AiProvider.find_by_name("default") do
+      {:ok, provider} ->
+        case ConversationManager.create_conversation(name, provider.id, "voice") do
+          {:ok, _pid} ->
+            case ConversationManager.open_conversation(name) do
+              {:ok, conv} ->
+                connect_and_send(socket, name, conv, transcription)
+
+              {:error, reason} ->
+                assign(socket,
+                  state: :transcribed,
+                  ai_error: "Failed to open voice conversation: #{inspect(reason)}"
+                )
+            end
+
+          {:error, reason} ->
+            assign(socket,
+              state: :transcribed,
+              ai_error: "Failed to create voice conversation: #{inspect(reason)}"
+            )
+        end
+
+      {:error, reason} ->
+        assign(socket,
+          state: :transcribed,
+          ai_error: "No default AI provider found: #{inspect(reason)}"
+        )
+    end
+  end
+
+  defp connect_and_send(socket, name, conversation, transcription) do
+    runner_pid = Map.get(conversation, :runner_pid)
+
+    if connected?(socket) do
+      Phoenix.PubSub.subscribe(ElixirAi.PubSub, chat_topic(name))
+
+      if runner_pid,
+        do: GenServer.call(runner_pid, {:session, {:register_liveview_pid, self()}})
+
+      send(self(), :sync_streaming)
+    end
+
+    if runner_pid do
+      GenServer.cast(runner_pid, {:conversation, {:user_message, transcription, nil}})
+    else
+      ChatRunner.new_user_message(name, transcription)
+    end
+
+    assign(socket,
+      state: :transcribed,
+      transcription: transcription,
+      conversation_name: name,
+      messages: conversation.messages,
+      streaming_response: conversation.streaming_response,
+      runner_pid: runner_pid,
+      ai_error: nil
+    )
+  end
+
+  defp get_snapshot(%{assigns: %{runner_pid: pid}}) when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+      snapshot -> snapshot
+    end
+  end
+
+  defp get_snapshot(_socket) do
+    %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+  end
 end